<template>
  <div class="table">
    <div>
      <button class="btn-play-once" @click="handlePalyAll">
        {{ playing ? "停止" : "听一遍" }}
      </button>
    </div>
    <div class="table-ctx">
      <div v-for="(num, index) in NUMBER_RANGE" class="row">
        <OneBlock
          @play="handlePlay"
          v-for="i in num"
          :multiplicand="i"
          :multiplier="num"
          :key="`${index}-${i}`"
        >
        </OneBlock>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { range } from "radash";
import OneBlock from "./OneBlock.vue";

const NUMBER_RANGE = ref<Generator<number>>(range(1, 9));

const emits = defineEmits<{
  (e: "play", fileName: string): void;
  (e: "palyAll", fileNames: string[]): void;
  (e: "stop"): void;
}>();

const playing = ref(false);

const handlePlay = (fileName: string) => {
  // console.log(fileName)
  emits("play", fileName);
};

const playAll = () => {
  let fileNames: string[] = [];
  for (const num of range(1, 9)) {
    for (const i of range(1, num)) {
      // console.log(`${i}x${num}=${i * num}`)
      fileNames.push(`${i}x${num}=${i * num}.mp3`);
    }
  }
  playing.value = true;
  NUMBER_RANGE.value = range(1, 9)
  emits("palyAll", fileNames);
};

const handlePalyAll = () => {
  if (playing.value) {
    playing.value = false;
    emits("stop");
    NUMBER_RANGE.value = range(1, 9)
  } else {
    playAll();
  }
};
</script>

<style scoped lang="scss">
.table {
  width: 873px;
  position: relative;

  .table-ctx {
    margin-top: 50px;
    .row {
      text-align: left;
      width: fit-content;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }

  .btn-play-once {
    background-color: #f56c6c;
    cursor: pointer;
    color: #fff;
    padding: 8px;
    outline: none;
    border-radius: 5px;
    border: none;
    position: absolute;
    top: -45px;
    left: 10px;
    font-size: 1.1em;
  }
}
</style>
